<template>
  <div class="page5" v-loading="loading">
    <div class="page-title">码号收入拉动分析</div>
    <el-row class="page-content">
      <el-col :span="8" class="left-content">
        <div class="title-dialog">分套餐拉动码号</div>
        <div class="content-title"><strong class="red">{{ftcText[0]}}：</strong>
          <!-- 融合套餐拉动码号增长{{4.46}}pp，较6月持平，其中 -->
          <!-- <span class="red">{{'绍兴、宁波'}}的融合套餐拉动较低。</span> -->
          {{ftcText[1]}}
        </div>
        <el-table :data="tableData1" border ref="table1" :header-cell-style="headerCellStyle">
          <el-table-column label="分公司" prop="displayName" align="center" min-width="70"></el-table-column>
          <el-table-column label="融合" prop="rhLd" align="center" min-width="70">
            <template v-slot="{ row }">
              {{ row.rhLd }}%
            </template>
          </el-table-column>
          <el-table-column label="互联网卡" prop="dcfLd" align="center" min-width="70">
            <template v-slot="{ row }">
              {{ row.dcfLd }}%
            </template>
          </el-table-column>
          <el-table-column label="其他单C" prop="dcLd" align="center" min-width="70">
            <template v-slot="{ row }">
              {{ row.dcLd }}%
            </template>
          </el-table-column>
          <el-table-column label="单宽" prop="dkLd" align="center" min-width="70">
            <template v-slot="{ row }">
              {{ row.dkLd }}%
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="16" class="right-content">
        <div class="title-dialog">存增量拉动码号</div>
        <div class="content-title"><strong class="red">{{czlText[0]}}：</strong>
          <!-- 公众客户收入同比增加{{39076}}万元， -->
          <!-- 增长{{5.83}}%；政企客户收入同比增加{{25980}}万元， -->
          <!-- 增长{{7.86}}%；{{'绍兴、温州、台州'}}公众客户拉动较低; -->
          <!-- {{'舟山、宁波、温州'}}政企客户拉动较低。 -->
          {{ czlText[1] }}
        </div>
        <el-table :data="tableData2" border :header-cell-style="headerCellStyle">
          <el-table-column 
            v-for="(item, i) in columns2"
            :key="i"
            :label="item" 
            :prop="item" 
            align="center"
            min-width="70"
          >
            <template v-slot="{ row }">
              <span v-if="item === '客户群'">{{row[item]}}</span>
              <span v-else>{{row[item]}}%</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>      
    </el-row>

  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
export default {
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },  
  data(){
    return {
      loading: false,
      tableData1: [],
      tableData2: [],
      columns2: [],

      ftcText: ["", ""],
      czlText: ["", ""],

      headerCellStyle: {
        fontSize: `12px`,
        fontWeight: '900',
        color: '#000',
        backgroundColor: 'rgb(183,222,232)',
        height: '30px',
        padding: '0'
      },
    }
  },
  created(){
    
  },
  methods: {
    getData(){
      this.loading = true;
      $budgetAPI.getCountyOperationPageFive(
        { token: this.form.token, areaId: this.form.areaId, acctMonth: this.form.month },
        res => {
          
          if(res.code == 0){
            const { ftcText, czlText, ftc, czl, name } = res.content;
            this.tableData1 = ftc;
            this.tableData2 = czl;
            this.columns2 = name;
            this.ftcText = ftcText == undefined ? ["", ""] : ftcText.split("：");
            this.czlText = czlText == undefined ? ["", ""] : czlText.split("：");
          }
          this.loading = false;
        },
        err => { this.loading = false; }
      )
    },
  },
}
</script>
<style lang="scss" scoped>
@import url("./style/table.scss");
.page5 {
  padding: 20px 10px 10px 10px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  .page-title {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
  }
  .page-content {
    display: flex;
    margin-top: 20px;
  }
  .left-content, .right-content {
    border: 1px solid #dee5f3;
    border-radius: 10px;
    position: relative;
    padding: 20px 15px 10px;
    font-size: 16px;
    .title-dialog {
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      padding: 4px 30px;
      text-align: center;
      background-color: rgb(192,0,0);
      color: #fff;
      font-weight: 600;
    }
    .content-title {
      padding-left: 30px;
      position: relative;
      margin-bottom: 10px;
      &::before {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        border: 3px solid rgb(199,0,0);
        top: 4px;
        left: 0;
      }
      strong {
        font-weight: 900;
      }
    }
    .red {
      color: rgb(199,0,0);
    }
  }
  .left-content {
    flex: 3;
    margin-right: 20px;
  }
  .right-content {
    flex: 5;
  }
}
/deep/ .el-table {
  .el-table__row {
    td {
      padding: 0 !important;
    }
    .cell {
      padding: 2px 0 !important;
      font-size: 12px !important;
    }
  }
}
</style>